<style>
    .layui-btn .layui-icon {
        margin-right: 0;
    }
    @media screen and (max-width: 500px) {
        .layui-table-view {
            width: 100% !important;
            overflow-x: scroll !important;
            left: 0 !important;
        }
        .layui-table-box {
            width: 600px !important;
            box-sizing: border-box;
        }
    }
</style>
<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <button class="layui-btn add-class layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
        </div>
    </div>
</form>

<div class="table-body">
    <table id="typeTable" lay-filter="test"></table>
</div>

<script>
    var table;
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        table = layui.table.render({
            elem: '#typeTable',
            height: 'full-99',
            cellMinWidth: '80',
            page: 'true',
            limit: '20',
            url: "{:url('GoodsParams/index')}?_ajax=1",
            id: 'typeTable',
            cols: [[
                {field:'id', width:90, title:'ID', align: 'center'},
                { field: 'name', width: 150, title: '名称', align: 'center'},
                {
                    field: 'type', width: 150, title: '类型', templet: function (data) {
                        if (data.type == 'text') {
                            return '文本框';
                        } else if (data.type == 'radio') {
                            return '单选框';
                        } else if (data.type == 'checkbox') {
                            return '复选框';
                        }
                    }, align: 'center'
                },
                { field: 'value', minWidth: 150, title: '参数', align: 'center' },
                {
                    field: 'operating', title: '操作', templet: function (data) {
                        var html = '';
                        var html = '<a  class="layui-btn layui-btn-xs edit-class" data-id="' + data.id + '">编辑</a>';
                        html += '<a class="layui-btn layui-btn-danger layui-btn-xs del-class" data-name="' + data.name + '" data-id="' + data.id + '">删除</a>';
                        return html;
                    }, align: 'center', width: 140
                }
            ]]
        });
        layui.form.on('submit(*)', function (data) {
            layui.table.reload('userTable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //添加分类
        $(document).on('click', '.add-class', function () {
            JsGet('{:url("GoodsParams/add")}', function (e) {
                if(e.status){
                    window_box = layer.open({
                        type: 1,
                        title: '添加参数',
                        btn: ['保存', '取消'],
                        area: setpage(450,350), //宽高
                        content: e.data,
                        yes: function () {
                            var name = $("#name").val();
                            var type = $("#type").val();
                            var value = $("#value").val();
                            var __Jshop_Token__ = $(".Jshop_Token:last").val();
                            var validate_form = $("input[name='validate_form']").val();

                            var error = false;
                            if (name.length > 6 || name.length < 1) {
                                error = true;
                                layer.msg('参数名称在1-6个字符之间', { time: 1300 });
                                return false;
                            }

                            if (type != 'text' && Trim(value) == '') {
                                error = true;
                                layer.msg('请填写参数选项', { time: 1300 });
                                return false;
                            }
                            if (!error) {
                                JsPost('{:url("GoodsParams/add")}', {
                                    'name': name,
                                    'type': type,
                                    'value': value,
                                    __Jshop_Token__:__Jshop_Token__,
                                    validate_form:validate_form
                                }, function (e) {
                                    if (e.status === true) {
                                        layer.close(window_box);
                                        layer.msg(e.msg, { time: 1300 }, function () {
                                            table.reload('typeTable');
                                        });
                                    } else {
                                        layer.msg(e.msg, { time: 1300 });
                                    }
                                });
                            }
                        }
                    });
                }else{
                    layer.msg(e.msg);
                }
            });
            return false;
        });

        //编辑参数
        $(document).on('click', '.edit-class', function () {
            var id = $(this).attr('data-id');
            JsGet('{:url("GoodsParams/edit")}?id=' + id, function (e) {
                if(e.status){
                    window_box = layer.open({
                        type: 1,
                        title: '编辑参数',
                        area: setpage(450,350), //宽高
                        content: e.data,
                        btn: ['保存', '取消'],
                        yes: function (d) {
                            var name = $("#name").val();
                            var type = $("#type").val();
                            var value = $("#value").val();
                            var id = $("#params_id").val();
                            var __Jshop_Token__ = $(".Jshop_Token:last").val();
                            var validate_form = $("input[name='validate_form']").val();
                            var error = false;
                            if (name.length > 6 || name.length < 1) {
                                error = true;
                                layer.msg('参数名称在1-6个字符之间', { time: 1300 });
                                return false;
                            }
                            if (!id || id == '') {
                                layer.msg('关键参数丢失', { time: 1300 });
                                return false;
                            }
                            if (!error) {
                                JsPost('{:url("GoodsParams/edit")}', {
                                    'name': name,
                                    'type': type,
                                    'value': value,
                                    'id':id,
                                    __Jshop_Token__:__Jshop_Token__,
                                    validate_form:validate_form
                                }, function(e){
                                    if (e.status === true) {
                                        layer.close(window_box);
                                        layer.msg(e.msg, { time: 1300 }, function () {
                                            table.reload('typeTable');
                                        });
                                    } else {
                                        layer.msg(e.msg, { time: 1300 });
                                    }
                                });
                            }
                        }
                    });
                }else{
                    layer.msg(e.msg);
                }
            });
        });

        //删除参数
        $(document).on('click', '.del-class', function () {
            var id = $(this).attr('data-id');
            var name = $(this).attr('data-name');
            layer.confirm('确认删除参数	：' + name + ' 吗？', {
                title: '提示', btn: ['确认', '取消'] //按钮
            }, function () {
                delClass(id);
            });
        });

        //删除操作
        function delClass(id) {
            JsPost('{:url("GoodsParams/del")}', {'id': id}, function(e){
                layer.msg(e.msg, { time: 1300 }, function () {
                    table.reload('typeTable');
                });
            });
        }
    });
</script>